<template lang="jade">
  div.candidate_panel
    div.weui_cell
      div.weui_cell_bd.weui_cell_primary workout库
      div.weui_cell_hd
        div.weui_btn.weui_btn_mini.weui_btn_primary(@click.stop="optionButtonClick")
          i.fa.fa-filter
    div.candidate_list
      div.weui_cell(v-for="(item, index) in candidates", @click.stop="selectItem(item, index)") 
        div.workout(v-bind:class="item.type === 'PT' ? 'PT_workout' : 'VPT_workout'"){{item.name}} 
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
  ...mapMutations(['UPDATE']),
  methods: {
    selectItem (item, index) {
      this.program.workouts.push({
        id: item.id,
        type: item.type,
        name: item.name
      })
    }
  },
  computed: {
    program: {
      get: function() {
        return this.$store.state.program
      },

      set: function(val, oldVal) {
        this.$store.commit('UPDATE', {
          key: 'program',
          value: val
        })
      }
    }
  },
  props: {
    candidates: Array,
    optionButtonClick: Function
  },
  watch: {},
  components: { },
  events: {},
  data() {
    return {}
  },
  mounted() {}
}
</script>
<style scoped>
.candidate_panel {
  width: 100%;
  height: 100%;
}

.filterPanel {
  position: absolute;
  width: 75%;
  height: 100%;
  right: 0;
}

.candidate_list .workout {
  width: 100%;
  padding: 2px 2px 2px 6px;
  color: #fff;
  border-radius: 5px;
  /* transition: background-color 2s linear; */
}

.candidate_list .workout:active {
  background-color: rgba(0, 0, 0, 0.5);
}

.candidate_list .weui_cell::before {
  border: none;
}

.PT_workout {
  background-color: #04be02;
}

.VPT_workout {
  background-color: #1bb1de;
}
</style>
